<template>
    <div class="header">
        <span class="routeName">{{ $route.name }}</span>
        <el-dropdown trigger="click">
            <span class="userImg">
                <el-avatar shape="square" size= '80xp'  fit= 'cover' src="/img/snowman.jpg" />
                <el-icon><CaretBottom /></el-icon>
            </span>
            <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="toProfile('/index/profile')">个人中心</el-dropdown-item>
                <el-dropdown-item>布局设置</el-dropdown-item>
                <el-dropdown-item divided @click="logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
            </template>
        </el-dropdown>     
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
let router = useRouter();

function toProfile(pageUrl) {
    router.push(pageUrl);
}
function logout(){
    ElMessageBox.confirm(
    '你确定要退出吗？',
    '退出登录',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
        router.push('/');
        ElMessage({
            type: 'success',
            message: '退出登录',
        })
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消',
        })
    })
}

</script>

<style scoped>
.header{height: 80px; color: gray; font-size: 20px; display: flex; justify-content: space-between; align-items: center; width: 100%;}
.header .routeNmae{padding: 10px; display: block; width: 100px;}
.header .userImg{margin-left: auto;}
</style>